<template>
	<pager ref="pager" @loadData="loadData" auth bottombar>
		<view class="safe-bottom flex flex-col w100">

			<view class="box1 flex flex-row align-c justify-b w100">
				<view class="lbox flex flex-col align-s justify-s">
					<view class="row1 flex flex-row align-l justify-s">
						<view class="txt1">序列号</view>
						<view class="txt2">DL2333</view>
					</view>
					<view class="row2">
						续航里程
					</view>
					<view class="row3 flex flex-row align-l justify-s">
						<view class="txt1">10</view>
						<view class="txt2">km</view>
					</view>
					<view class="row4 flex flex-row align-c justify-s">
						<view class="progress flex-shrink">
							<u-circle-progress :duration="800" :border-width="6" :width="64" bg-color="#00000000"
								inactive-color="#A1A5AC" active-color="#FF9412" :percent="percent">
								<image class="ico1" mode="widthFix" :src="$assets.img('/static/images/ic009.png')">
								</image>
							</u-circle-progress>
						</view>
						<view class="bat flex flex-col align-c justify-c">
							<view class="txt1">当前电量</view>
							<view class="txt2">50%</view>
						</view>
					</view>
				</view>
				<view class="rbox flex flex-col align-e justify-b">
					<image class="ico1" mode="widthFix" :src="$assets.img('/static/images/ic010.png')"></image>
					<view class="txt1">HBDL3x</view>
				</view>
			</view>

			<view class="box2 flex flex-row align-c justify-a w100">

				<view @click="showXuHang" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic015.png')">
					</image>
					<view class="info flex flex-col align-c justify-c">
						<view class="txt1">行驶里程</view>
						<view class="txt2">114.50km</view>
					</view>
				</view>

				<view @click="showZhiBao" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic012.png')">
					</image>
					<view class="info flex flex-col align-c justify-c">
						<view class="txt1 flex flex-row align-c justify-c">整车质保<view class="txt3">在保</view>
							<u-icon name="info-circle" color="#ffffff" :size="28"></u-icon>
						</view>
						<view class="txt2" style="margin-right: 34rpx;">2024年4月10日</view>
					</view>
				</view>
			</view>

			<view class="box3 flex flex-row align-s justify-s flex-wrap w100">
				<view @click="goTest" hover-class="click-view" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic019.png')">
					</image>
					<view class="info flex flex-sub flex-col align-c justify-c">
						<view class="txt1">智能故障检测</view>
					</view>
				</view>
				<view @click="updateFirmware" hover-class="click-view" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic016.png')">
					</image>
					<view class="info flex flex-sub flex-col align-c justify-c">
						<view class="txt1">固件升级</view>
					</view>
				</view>
				<view @click="showBattery" hover-class="click-view" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic017.png')">
					</image>
					<view class="info flex flex-sub flex-col align-c justify-c">
						<view class="txt1">电池健康</view>
						<view class="txt2">充放电循环22次</view>
					</view>
				</view>
				<view @click="goSupport" hover-class="click-view" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic011.png')">
					</image>
					<view class="info flex flex-sub flex-col align-c justify-c">
						<view class="txt1">售后支持</view>
						<view class="txt2">有问题联系我们</view>
					</view>
				</view>
				<view @click="goSOS" hover-class="click-view" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic014.png')">
					</image>
					<view class="info flex flex-sub flex-col align-c justify-c">
						<view class="txt1">紧急求助</view>
						<view class="txt2">管理紧急联系人</view>
					</view>
				</view>
				<view hover-class="click-view" class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic013.png')">
					</image>
					<view class="info flex flex-sub flex-col align-c justify-c">
						<view class="txt1">个人中心</view>
					</view>
				</view>
			</view>
		</view>

		<template v-slot:bottombar>
			<view class="bottombar">
				<view class="bottombar-content">
					<view @click="goControl" hover-class="click-view"
						class="control-btn flex flex-row align-c justify-c">
						<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic018.png')">
						</image>
						遥控
					</view>
				</view>
			</view>
		</template>
	</pager>
</template>
<script>
	export default {
		data() {
			return {
				percent: 50
			};
		},
		methods: {
			loadData() {
				const vm = this;
				vm.$refs.pager.finish();
			},
			showXuHang() {
				const vm = this;
				vm.$utils.showToast('当前电量剩余50%，预估可行驶114.50km');
			},
			showZhiBao() {
				const vm = this;
				vm.$utils.showToast('当前设备正常质保中，请放心使用');
			},
			showBattery() {
				const vm = this;
				vm.$utils.showToast('当前电池充放电循环22次，健康度良好');
			},
			updateFirmware() {
				const vm = this;

				vm.$utils.isNetworkConnected().then(res => {
					uni.showLoading({
						title: '固件检测中'
					})
					setTimeout(() => {
						uni.hideLoading()
						vm.$utils.showToast('当前固件已是最新版本，无需升级');
					}, 2000)
				}).catch(error => {
					vm.$utils.showToast(error);
				})
			},
			goTest() {
				const vm = this;
				vm.$utils.openPage('/pkgTest/pages/index/index');
			},
			goControl() {
				const vm = this;
				vm.$utils.openPage('/pkgControl/pages/index/index');
			},
			goSupport() {
				const vm = this;
				vm.$utils.openPage('/pkgSupport/pages/index/index');
			},
			goSOS() {
				const vm = this;
				vm.$utils.openPage('/pkgSOS/pages/index/index');
			},
		}
	};
</script>
<style>
	page {
		background-color: #000000;
	}
</style>
<style lang="scss" scoped>
	.bottombar-content {
		padding: 30rpx;

		.control-btn {
			height: 108rpx;
			background: linear-gradient(180deg, #427DF7 0%, #0B51E4 100%);
			border-radius: 54rpx;
			font-size: 40rpx;
			color: #FFFFFF;

			.ico1 {
				width: 72rpx;
				height: 72rpx;
				display: block;
				margin-right: 20rpx;
			}
		}

	}

	.box1 {
		height: 566rpx;
		position: relative;
		padding-top: 20rpx;

		.lbox {
			position: absolute;
			left: 0;
			margin-left: 30rpx;
			z-index: 2;

			.row1 {
				.txt1 {
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.txt2 {
					margin-left: 16rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.row2 {
				margin-top: 56rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.row3 {
				.txt1 {
					font-size: 68rpx;
					color: #FFFFFF;
					font-weight: bold;
					font-style: italic;
				}

				.txt2 {
					margin-left: 10rpx;
					font-style: italic;
					font-size: 56rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.row4 {
				margin-top: 24rpx;
				width: 230rpx;
				height: 76rpx;
				background: #26314D;
				border-radius: 38rpx;

				.progress {
					margin-left: 8rpx;
					margin-top: 2rpx;

					.ico1 {
						width: 32rpx;
						height: 36rpx;
						display: block;
					}
				}

				.bat {
					margin-top: 2rpx;
					margin-left: 16rpx;

					.txt1 {
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 24rpx;
					}

					.txt2 {
						margin-top: 4rpx;
						font-size: 32rpx;
						font-weight: bold;
						line-height: 32rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.rbox {
			position: absolute;
			right: 0;
			z-index: 1;

			.ico1 {
				width: 460rpx;
				height: 478rpx;
				display: block;
			}

			.txt1 {
				margin-top: 20rpx;
				padding-left: 80rpx;
				width: 460rpx;
				text-align: center;
				font-size: 24rpx;
				color: #C4BCBC;
			}
		}
	}

	.box2 {
		margin-top: 40rpx;

		.item {

			.ico1 {
				width: 60rpx;
				height: 60rpx;
				display: block;
			}

			.info {
				margin-left: 14rpx;
				flex: 1;

				.txt1 {
					font-size: 26rpx;
					font-style: italic;
					color: #FFFFFF;

					.txt3 {
						margin-left: 10rpx;
						margin-right: 20rpx;
						color: #5AB90D;
					}
				}

				.txt2 {
					margin-top: 8rpx;
					font-size: 26rpx;
					color: #959494;
					font-style: italic;
				}

			}
		}
	}

	.box3 {
		margin-top: 24rpx;
		padding: 0 10rpx;

		.item {
			width: calc((100% - 40rpx) / 2);
			margin: 10rpx;
			padding: 0 30rpx;
			height: 130rpx;
			border-radius: 20rpx;
			border: 1px solid #5D606A;

			.ico1 {
				width: 48rpx;
				height: 48rpx;
				display: block;
			}

			.info {
				margin-left: 20rpx;
				flex: 1;

				.txt1 {
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.txt2 {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #B8B3B3;
				}

			}
		}
	}
</style>